<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Jquery Examples</title>
		<script type="application/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<style type="text/css">
			.btn{
				float:left;
				background-color:#A2A2A2;
				margin:15px;
				padding:2px;
			}
			#contents{
				clear:both;
			}
		</style>
	</head>

	<body>		
		<div class="btn">
			<p>target elements with the tab class.</p><button id="selecter">Toggle</button>
		</div>
		
		<div class="btn">
			<p>target last element with a class of tab.</p><button id="traverse">Toggle</button>
		</div>
		
		<div class="btn">
			<p>background color</p><button id="manipulation">Toggle</button>
		</div>

		<div class="btn">
			<p>Uses hover event and and toggleSlide effect</p><button id="effect">Toggle</button>
		</div>
		
		<div id="contents">
			<h4>This has a class of tab</h4>
			<p class="tab">Sed parturient vel augue a phasellus duis et ridiculus tincidunt, dictumst integer arcu platea et, augue, arcu magnis, risus ultricies adipiscing, scelerisque ac pulvinar eu sagittis ac, vel facilisis montes.
	
	Odio amet, pid sit aenean, tempor, ridiculus nec, turpis tincidunt amet sagittis lundium augue magna tincidunt nec mauris porta magnis elit egestas pellentesque dictumst augue. Quis nec, cras in.
			</p>
			
			<h4>This has a class of tab</h4>
			<p class="tab">Porttitor platea quis turpis? Penatibus facilisis sit et lorem augue hac et amet ultrices a in risus, eros, etiam, ac? Ut magna sit sed elementum nascetur, eros nisi, rhoncus.
			</p>
			
		</div>
		
		<script>
			$(document).ready(function() {
				$("button#selecter").click(function(){
					$("p.tab").toggle();
				});
				
				$("button#traverse").click(function(){
					$("p.tab").last().toggle();
				});
				
				$("button#manipulation").click(function(){
					$("p.tab").css("color", "red");
				})
				
				$("button#effect").hover(function(){
					$("p.tab").slideToggle("slow");
				})
				
			});
		</script>
	</body>
</html>
